<!DOCTYPE html>
<html>
<head>
    <title>天气预测</title>
    <style>  
        body {  
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: white;
        }  
        h1 {  
            color: #333;
            font-size: 28px;
            text-align: center;
            margin-bottom: 30px;
        }  
        form {  
            max-width: 400px;  
            margin: 0 auto;  
        }  
        label {  
            display: block;  
            margin-bottom: 10px;  
        }  
        input[type="text"], select {  
            width: 100%;  
            padding: 10px;  
            margin-bottom: 20px;  
            border-radius: 5px;  
            border: 1px solid #ccc;  
        }  
        input[type="submit"] {  
            background-color: #4CAF50;  
            color: white;  
            padding: 10px 20px;  
            border: none;  
            border-radius: 5px;  
            cursor: pointer;  
            transition: background-color 0.3s;
        }  
        input[type="submit"]:hover {  
            background-color: #45a049;
        }
        #loadingScreen {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.8);
            z-index: 9999;
        }
        #loadingScreen div {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
        }
        #loadingScreen img {
            width: 150px;
            height: 150px;
        }
        #loadingScreen p {
            margin-top: 10px;
        }
        @media (max-width: 767px) {
    h1 {
        font-size: 24px;
    }

    form {
        width: 95%;
    }
}
    </style>
</head>
<body>
    <h1>天气预测</h1>
    <form method="POST" action="/prewea">
        <label for="cityname">城市名称：</label>
        <input type="text" id="cityname" name="cityname" value="{{ current_cityname }}" required><br><br>
        <label for="year">训练集起始年份：</label>
        <select id="year" name="year" required>
            {% for y in range(2022, 2012, -1) %}
            <option value="{{ y }}">{{ y }}</option>
           {% endfor %}
        </select><br><br>
        <label for="epochs">训练轮数：</label>
        <select id="epochs" name="epochs" required>
            {% for e in range(10, 101, 10) %}
                <option value="{{ e }}">{{ e }}</option>
            {% endfor %}
        </select><br><br>
        <label for="days">预测天数：</label>
        <select id="days" name="days" required>
            {% for f in range(10, 95, 5) %}
                <option value="{{ f }}">{{ f }}</option>
            {% endfor %}
        </select><br><br>
        <input type="submit" value="预测">
    </form>
    <div id="loadingScreen">
        <div>
            <img src="{{ url_for('static', filename='images/loading.gif') }}" alt="Loading...">
            <p>正在预测...</p>
        </div>
    </div>
    <script>  
        document.querySelector('form').addEventListener('submit', function() {  
            // 显示遮罩层和加载动画  
            document.getElementById('loadingScreen').style.display = 'block';  
        });  
    </script>
</body>
</html>